<template>
  <div class="eventResultsStatisticalWrap">
    <!--    'background-color': '#1f4b99'-->
    <!--    <indexHeader></indexHeader>-->
    <el-row class="title">
      <p>{{taskName}}</p>
    </el-row>
    <el-row class="goBack">
      <span @click="$router.push('/operationMenu')">返回 ></span>
    </el-row>
    <div class="main">
      <el-row v-if="taskInfo.length == 2" class="mainTitle">
        <el-col :span="12" v-for="taskItem in taskInfo" :key="taskItem.VenuesId">
          <div>
            <p><span>{{taskItem.MatchName}}</span><i>{{taskItem.StartTime.split('T')[0]}}&nbsp;&nbsp;&nbsp;{{taskItem.StartTime.split('T')[1]}} - {{taskItem.EndTime2.split('T')[1]}}</i></p>
            <p><span>答卷总时长</span><i>{{taskItem.TotalTime}}分钟</i></p>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="taskInfo.length == 1" class="mainTitle2">
        <el-col :span="24">
          <div>
            <p><span>{{taskInfo[0].MatchName}}</span><i>{{taskInfo[0].StartTime.split('T')[0]}}&nbsp;&nbsp;&nbsp;{{taskInfo[0].StartTime.split('T')[1]}} - {{taskInfo[0].EndTime2.split('T')[1]}}</i></p>
            <p><span>答卷总时长</span><i>{{taskInfo[0].TotalTime}}分钟</i></p>
          </div>
        </el-col>
      </el-row>
      <el-row class="tabsTitle">
        <span v-for="tabsName in tabsTitleData" :key="tabsName" @click="changeTabsFn(tabsName)"
              :class="{'active':tabsType == tabsName}">{{tabsName}}</span>
      </el-row>
      <el-row class="exportBox">
        <span @click="exportGrade">导出成绩</span>
      </el-row>
      <el-row v-if="tabsType == '总排名'" class="tabs1">
        <el-table
          :data="allRankList"
          border
          stripe
          style="width: 100%">
          <el-table-column
            prop="Rank"
            sortable
            label="名次">
            <template slot-scope="scope">
              <p class="item">
                {{scope.row.CurrentRanking}}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="GroupNo"
            sortable
            label="团队">
            <template slot-scope="scope">
              <p class="item">
                {{scope.row.GroupNo}}组
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="YcsTotalScore"
            label="所属院校">
            <template slot-scope="scope">
              <p class="item">
                {{scope.row.SchoolName}}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="BigTotalScore"
            label="指导老师">
            <template slot-scope="scope">
              <p class="item">
                {{scope.row.AdviserName}}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="TotalScore"
            sortable
            label="考核用时">
            <template slot-scope="scope">
              <p class="item">
                {{time(scope.row.TotalSeconds)}}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="TotalScore"
            label="单场总分">
            <template slot-scope="scope">
              <p class="item">
                {{scope.row.TotalScore}}分
              </p>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <el-row v-if="tabsType == '岗位得分'" class="tabs2">
        <el-table
          :data="postScoreList"
          border
          @sort-change="sortChange"
          style="width: 100%">
          <!--          v-el-table-infinite-scroll="load"-->
          <el-table-column
            prop="GroupNo"
            label="团队"
            sortable
            width="100"
          >
            <template slot-scope="scope">
              <p>
                {{scope.row.GroupNo}}组
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="TotalScore"
            label="指导老师">
            <template slot-scope="scope">
              <p>
                {{scope.row.AdviserName}}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            label="考核内容"
          >
            <template slot-scope="scope">
              <p
                v-for="(item,i) in scope.row.GroupVenuesList"
                :key="'a'+i"
                class="rowBox rowSpan2 item"
                :style="{'height':item.GroupVenuesUserList.length*40+'px'}"
                :class="{'bb':i===0}"
              >
                  <span>
<!--                   {{item.VenuesName}}-->
                   {{item.MatchName}}
                  </span>
              </p>
            </template>
          </el-table-column>
          <el-table-column
            label="岗位"
          >
            <template slot-scope="scope">
              <el-row>
                <el-col
                  v-for="(item,i) in scope.row.GroupVenuesList"
                  :key="'b'+i"
                  class="rowBox"
                >
                  <p v-for="(val,k) in item.GroupVenuesUserList"
                     :key="'c'+k"
                     class="bt item"
                     :class="{'nobdtop':i ===0 && k ===0}"
                  >
                    <span>
                       {{val.PostionName}}
                    </span>

                  </p>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
            label="考生"
          >
            <template slot-scope="scope">
              <el-row>
                <el-col
                  v-for="(item,i) in scope.row.GroupVenuesList"
                  :key="'d'+i"
                  class="rowBox"
                >
                  <p v-for="(val,k) in item.GroupVenuesUserList"
                     :key="'e'+k"
                     class="bt item"
                     :class="{'nobdtop':i ===0 && k ===0}"
                  >
                    <span>
                      {{val.StudentName}}
                    </span>
                  </p>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
            label="用时"
          >
            <template slot-scope="scope">
              <el-row>
                <el-col
                  v-for="(item,i) in scope.row.GroupVenuesList"
                  :key="'f'+i"
                  class="rowBox"
                >
                  <p v-for="(val,k) in item.GroupVenuesUserList"
                     :key="'g'+k"
                     class="bt item"
                     :class="{'nobdtop':i ===0 && k ===0}"
                  >
                    <span>
                       {{time(val.UsedSeconds)}}
                    </span>
                  </p>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
            label="个人成绩"
          >
            <template slot-scope="scope">
              <el-row>
                <el-col
                  v-for="(item,i) in scope.row.GroupVenuesList"
                  :key="'h'+i"
                  class="rowBox"
                >
                  <p v-for="(val,k) in item.GroupVenuesUserList"
                     :key="'i'+k"
                     class="bt item"
                     :class="{'nobdtop':i ===0 && k ===0}"
                     :style="{'color':val.ScoreColor}"
                  >
                    <span>
                      {{val.Score}}分
                    </span>
                  </p>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
            label="单项总成绩"
          >
            <template slot-scope="scope">
              <el-row>
                <el-col
                  v-for="(item,i) in scope.row.GroupVenuesList"
                  :key="'j'+i"
                  class="rowBox rowSpan2"
                  :style="{'lineHeight':item.GroupVenuesUserList.length*40+'px'}"
                  :class="{'bb':i===0}"
                >
                  <p>{{item.TotalSocre}}分<span class="look" @click="previewTopic(item)">查看答题详情</span></p>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
            sortable
            prop="Rank"
            label="总排名">
            <template slot-scope="scope">
              <el-row class="rankBox">
                <i class="medal"
                   :class="scope.row.CurrentRanking == 1?'first':scope.row.CurrentRanking == 2?'second':scope.row.CurrentRanking == 3?'thirdly':''"
                   v-if="scope.row.CurrentRanking<=3"></i>
                <el-col class="rank">第 {{scope.row.CurrentRanking}} 名</el-col>
<!--                <el-col class="rankScore">{{scope.row.TotalScore}}分</el-col>-->
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <el-col class="loadingBox" style="height: 40px;">
          <!--          v-show="showAll"-->
          <el-button type="info" :loading="true" v-show="showAll">正在加载数据中...</el-button>
          <!--          v-if="noData"-->
          <p v-if="noData">
            <span>没有更多数据了</span>
          </p>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import indexHeader from "@/components/header.vue";
  import IndexFooter from "@/components/footer.vue";
  import axios from 'axios'
  // import elTableInfiniteScroll from 'el-table-infinite-scroll';
  //全局引入
  // npm install --save el-table-infinite-scroll

  // import Vue from 'vue';
  // import elTableInfiniteScroll from 'el-table-infinite-scroll';
  // Vue.use(elTableInfiniteScroll);


  export default {
    components: {
      indexHeader,
      IndexFooter,

    },
    name: "eventResultsStatistical",
    // directives: {
    //   'el-table-infinite-scroll': elTableInfiniteScroll
    // },
    data() {
      return {
        tabsTitleData: ['总排名', '岗位得分'],
        tabsType: '总排名',
        taskInfo: [],//考试信息
        taskName: '',//任务名称
        one: false,
        tableData1: [],//总分明细表
        tbodyData: [],//成绩明细表
        pageIndex: 1, //当前页
        pageSize: 10,
        pages: 0,
        count: 0,
        allRankList: [],//总分排名
        postScoreList: [],//成绩明细
        showAll: false,//显示正在加载中
        noData: false,//没有更多数据了
        isOk: true,//是否请求接口
      };
    },
    destroyed() {
      window.removeEventListener('scroll', this.onScroll, true)
    },
    created() {
      if(this.$route.query.tabsType) {
        this.tabsType = this.$route.query.tabsType;
        this.pageSize = this.$route.query.pageSize;
        document.body.scrollTop = document.documentElement.scrollTop =  this.$route.query.scrollTop;
      }
      this.init()
    },
    mounted() {
    },
    methods: {
      init() {
        this.getproexamlistbytaskidFn()
        this.changeTabsFn(this.tabsType);
      },
      //查看做答详情
      previewTopic(val) {
        // console.log(val);
        let query = {
          GradeId: val.GradeId,
          Name: val.MatchName,
          CaseId: val.CaseId,
          CaseYear: val.CaseYear,
          url: this.$route.path,
          tabsType: this.tabsType,
          pageSize: this.pageSize,
          scrollTop: this.getScrollTop()
        };
        this.$router.push({
          path:'/viewPaper',
          query
        })
      },
      //获取赛事团队成绩统计列表(总排名)
      getgrouptotalnumberresultsstatisticallistFn() {
        let params = {
          taskId: this.userInfo.TaskId
        };
        this.$api.competitionReportService.getgrouptotalnumberresultsstatisticallist(params).then(res => {
          // console.log(res, '获取赛事团队成绩统计列表(总排名)');
          if (res.Code == 200) {
            res.Data.forEach(val => {
              val.GroupName = val.GroupNo + '组';
              val.TotalTime = this.time(val.TotalSeconds)
            })
            this.allRankList = res.Data
          }
        }).catch(err => {
          console.log(err, 'err');
        })
      },
      //获取赛事团队成绩统计列表(岗位得分)
      getgrouppositionscoreresultsstatisticallistFn(type,val) {
        let params = {
            taskId: this.userInfo.TaskId,
            pageIndex: 1,
            pageSize: this.pageSize
        };
        this.$api.competitionReportService.getgrouppositionscoreresultsstatisticallist(params).then(res => {
          // console.log(res, '获取赛事团队成绩统计列表(岗位得分)');
          if (res.Code == 200) {
            this.count = res.RecordCount;
            this.pages = Math.ceil(res.RecordCount / this.PageSize);
            this.pageSize += 10;
            //当type == 1说明是下拉刷新加载，延迟赋值 否则是切换请求，直接赋值
            if(type == 1){
              setTimeout(() => {
                this.showAll = false;
                this.postScoreList = res.Data;
                this.isOk = true;
                //屏幕滚动拉回去
                document.body.scrollTop = document.documentElement.scrollTop = val - 100;
              }, 1000);
            }else{
              this.postScoreList = res.Data
            }
          }
        }).catch(err => {
          console.log(err, 'err');
        })
      },
      //根据taskId获取考试信息
      getproexamlistbytaskidFn() {
        this.$api.examProvincialCompetitionTaskService.getproexamlistbytaskid().then(res => {
          // console.log(res,'根据taskId获取考试信息');
          if(res.Code == 200){
            this.taskName = res.Data[0].TaskName;
            res.Data.forEach(v => {
              let number = new Date(v.StartTime).getTime() + (v.TotalTime * 60 * 1000);
              v.EndTime2 = this.timestamp(number);
            })
            this.taskInfo = res.Data
          }
        }).catch(err => {
          console.log(err,'err');
        })
      },
      //获取赛事团队成绩统计列表(岗位得分)导出
      exportgrouppositionscoreresultsstatisticalFn() {
        let params = {
          taskId: this.userInfo.TaskId,
        };
        let xhr;
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
        } else {
          xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhr.responseType = "blob";
        xhr.open('GET', `${window.PUBLICHOSTA}competitionreport/exportgrouppositionscoreresultsstatistical?taskId=${this.userInfo.TaskId}`, true);
        xhr.setRequestHeader("token", sessionStorage.getItem('accessToken'));
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.setRequestHeader('Cache-Control', 'max-age=3000');
        // xhr.setRequestHeader('responseType', 'blob');
        xhr.send()
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4 && xhr.status === 200) {
            const BLOB =xhr.response; // Blob 对象表示一个不可变、原始数据的类文件对象（File 接口都是基于Blob）
            const fileReader = new FileReader(); // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
            fileReader.readAsDataURL(BLOB); // 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
            fileReader.onload = (event) => { // 处理load事件。该事件在读取操作完成时触发
              // 新建个下载的a标签，完成后移除。
              let a = document.createElement('a');
              a.download = `成绩明细表.xlsx`;
              a.href = event.target.result;
              document.body.appendChild(a);
              a.click();
              document.body.removeChild(a);
            }

          }
        }

      },
      changeTabsFn(tabsName) {
        if (tabsName == '总排名') {
          // console.log('总排名tabs');
          window.removeEventListener('scroll', this.onScroll, true)
          this.getgrouptotalnumberresultsstatisticallistFn()
        } else if (tabsName == '岗位得分') {
          // console.log('岗位得分tabs');
          window.addEventListener("scroll", this.onScroll, true);
          this.getgrouppositionscoreresultsstatisticallistFn()
        }
        this.tabsType = tabsName;
      },
      //导出
      exportGrade() {
        if (this.tabsType == '总排名') {
          this.handleExport()
          // console.log('总排名导出');
        } else if (this.tabsType == '岗位得分') {
          // console.log('岗位得分导出');
          this.exportgrouppositionscoreresultsstatisticalFn()
        }
      },
      //下载
      handleExport() {
        //this.downloadLoading = true;
        require.ensure([], () => {
          const {export_json_to_excel} = require('@/vendor/Export2Excel');    //引入文件,注意路径
          const tHeader = ['名次','团队', '所属院校', '指导老师', '考核用时', '单场总分'];  //将对应的属性名转换成中文
          const filterVal = ['CurrentRanking','GroupName', 'SchoolName', 'AdviserName','TotalTime', 'TotalScore'];    //table表格中对应的属性名
          const list = this.allRankList;//替换成自己的数据
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, this.taskName);
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]));
      },
      //时间格式
      time(result) {
        /* if(result>3600){*/
        var h = Math.floor(result / 3600);
        var m = Math.floor((result % 3600) / 60) < 10
          ? "0" + Math.floor((result % 3600) / 60)
          : Math.floor((result % 3600) / 60);

        var s = Math.floor(result % 60) < 10
          ? "0" + Math.floor(result % 60)
          : Math.floor(result % 60);

        return h + "小时" + m + "分" + s + "秒";
        /*  }else{
              var m = Math.floor((result % 3600) / 60) < 10
                  ? "0" + Math.floor((result % 3600) / 60)
                  : Math.floor((result % 3600) / 60);

              var s =Math.floor(result % 60) < 10
                  ? "0" + Math.floor(result % 60)
                  : Math.floor(result % 60);
              return  "0小时" + m + "分" + s + "秒";
          }*/


      },
      //表格排序
      sortChange(column, prop, order) {
        //ascending升序  descending降序
        // console.log(column, prop, order);
      },
      //获取卷去的高度
      getScrollTop() {
        var scrollTop = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
          scrollTop = document.documentElement.scrollTop;
        } else if (document.body) {
          scrollTop = document.body.scrollTop;
        }
        return scrollTop;
      },
      // 获取当前可视范围的高度
      getClientHeight() {
        var clientHeight = 0;
        if (document.body.clientHeight && document.documentElement.clientHeight) {
          clientHeight = Math.min(
            document.body.clientHeight,
            document.documentElement.clientHeight
          );
        } else {
          clientHeight = Math.max(
            document.body.clientHeight,
            document.documentElement.clientHeight
          );
        }
        return clientHeight;
      },

      // 获取文档完整的高度
      getScrollHeight() {
        return Math.max(
          document.body.scrollHeight,
          document.documentElement.scrollHeight
        );
      },
      // 滚动事件触发下拉加载
      onScroll() {
        const scrollTopNumber = this.getScrollTop();
        // console.log(scrollTopNumber);
        if (this.getScrollHeight() - this.getClientHeight() - this.getScrollTop() <= 10) {
          // console.log(this.getScrollHeight(), this.getClientHeight(), this.getScrollTop());
          // window.scrollTo(0, scrollTopNumber);
          if (this.pageSize < this.count && this.isOk) {
            this.isOk = false;
            this.showAll = true;
            this.getgrouppositionscoreresultsstatisticallistFn(1,scrollTopNumber)
          }
          if (this.pageSize >= this.count) {
            setTimeout(() => {
              this.noData = true;
              this.isOk = false;
            }, 1000);

          }

        }
      },
      //时间戳转日期
      timestamp(timestamp){
        var d = new Date(timestamp);    //根据时间戳生成的时间对象
        var year=d.getFullYear()
        var month=d.getMonth()+1
        var day=d.getDate()
        var hour=d.getHours()
        var minute=d.getMinutes()
        var second=d.getSeconds()
        if(month<10){
          month='0'+month
        }
        if(day<10){
          day='0'+day
        }
        if(hour<10){
          hour='0'+hour
        }
        if(minute<10){
          minute='0'+minute
        }
        if(second<10){
          second='0'+second
        }
        let html=year + "-" + month + "-" +day  +'T'+ hour+':'+minute+':'+second
        return html
      }
    },
    computed: {
      ...mapGetters({
        userInfo: ["userInfo"]
      }),
    },
    watch: {

    },

  };
</script>

<style lang="less">
  .eventResultsStatisticalWrap {
    background: #171A2B;
    min-height: 100vh;
    box-sizing: border-box;
    width: 100%;
    min-width: 1430px;
    padding-top: 40px;
    overflow-y: auto;
    p{
      margin-bottom: 0;
    }
    .title {
      width: 490px;
      margin: 0 auto;
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      line-height: 33px;
      text-align: center;
    }

    .goBack {
      width: 85%;
      margin: 0 auto 20px;
      text-align: right;

      span {
        cursor: pointer;
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
      }
    }

    .main {
      width: 85%;
      min-width: 1277px;
      min-height: calc(100vh - 144px);
      /*width: 1277px;*/
      margin: 0 auto 30px;
      padding: 9px 40px 0;
      box-sizing: border-box;
      /*background-color: rgba(255, 255, 255, 0.03);*/
      background-color: #212334;

      .mainTitle {
        .el-col {
          padding: 31px 79px;
          box-sizing: border-box;
          text-align: right;

          &:nth-of-type(1) {
            border-right: 1px solid rgba(23, 26, 43, 1);

            div {
              display: inline-block;
            }
          }

          p {
            text-align: left;

            &:nth-of-type(1) {
              margin-bottom: 16px;
            }

            span {
              font-size: 14px;
              font-family: PingFangHK-Regular, PingFangHK;
              font-weight: 400;
              text-align: right;
              margin-right: 10px;
              color: rgba(255, 255, 255, .5);
              display: inline-block;
              width: 200px;
            }

            i {
              font-style: normal;
              font-size: 14px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: rgba(252, 79, 90, 1);
            }
          }
        }
      }
      .mainTitle2{
        padding: 31px 79px;
        .el-col{
          div{
            text-align: center;
            p{
              display: inline-block;
              &:nth-of-type(1){
                margin-right: 80px;
              }
              span {
                font-size: 14px;
                font-family: PingFangHK-Regular, PingFangHK;
                font-weight: 400;
                text-align: right;
                margin-right: 10px;
                color: rgba(255, 255, 255, .5);
                display: inline-block;
                /*width: 200px;*/
              }

              i {
                font-style: normal;
                font-size: 14px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: rgba(252, 79, 90, 1);
              }
            }
          }
        }
      }

      .tabsTitle {
        margin-top: 9px;
        padding: 0 30px;
        box-sizing: border-box;
        height: 60px;
        background: rgba(23, 26, 43, 1);
        line-height: 60px;
        /*opacity:0.27;*/

        span {
          display: inline-block;
          width: 98px;
          height: 60px;
          box-sizing: border-box;
          text-align: center;
          font-size: 14px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: rgba(230, 230, 230, .7);
          margin-right: 18px;
          cursor: pointer;

          &.active {
            color: rgba(39, 129, 242, .7);
            border-bottom: 2px solid rgba(39, 129, 242, .7);
          }
        }
      }

      .exportBox {
        margin: 31px 0 21px;
        padding: 0 13px;
        box-sizing: border-box;
        text-align: right;

        span {
          display: inline-block;
          width: 118px;
          height: 38px;
          background: linear-gradient(90deg, rgba(2, 169, 254, 1) 0%, rgba(6, 136, 250, 1) 100%);
          box-shadow: 0px 8px 16px 0px rgba(2, 167, 254, 0.1);
          border-radius: 2px;
          filter: blur(0px);
          font-size: 13px;
          font-family: PingFangHK-Regular, PingFangHK;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 38px;
          text-align: center;
          cursor: pointer;
        }
      }

      .tabs1, .tabs2 {
        .el-table {
          border-color: #363636;

          &::after, &::before {
            background-color: #363636;
          }

          tr, td, th {
            border-color: #363636;
          }

          thead {
            tr {
              th {
                border: none;
                text-align: center;
                background: #133E60;
                padding: 7px 0;
                color: rgba(0, 176, 255, 0.8);

                .ascending {
                  border-bottom-color: rgba(0, 176, 255, 0.2);
                }

                .descending {
                  border-top-color: rgba(0, 176, 255, 0.2);
                }

                &.ascending {
                  .ascending {
                    border-bottom-color: rgba(0, 176, 255, 0.8);
                  }
                }

                &.descending {
                  .descending {
                    border-top-color: rgba(0, 176, 255, 0.8);
                  }
                }
              }

            }
          }

          tbody {
            tr {
              td {
                text-align: center;
                background: #212334;
                color: rgba(255,255,255,.6);
              }
            }

          }
          .el-table__empty-block{
            background: #212334;
            min-height: calc(100vh - 550px);
          }
        }
      }

      .tabs1 {
        padding-bottom: 30px;
        tbody {
          tr {
            &:nth-of-type(2n-1) {
              td {
                background-color: #282A38;
              }
            }

            .cell {
              display: flex;
              align-items: center;
              height: 56px;

              .item {
                width: 100%;
              }
            }
          }

        }
      }

      .tabs2 {
        /*height: 1000px;*/
        /*overflow-y:auto;*/
        /*overflow-x: hidden;*/
        /*!* 设置滚动条的样式 *!*/

        /*&::-webkit-scrollbar {*/
        /*  width: 6px;*/
        /*  background: rgba(255, 255, 255, 0);*/
        /*}*/

        /*!* 滚动槽 *!*/

        /*&::-webkit-scrollbar-track {*/
        /*  !*margin-right: 6px;*!*/
        /*  !*right: 6px;*!*/
        /*  background: rgba(255, 255, 255, 0);*/
        /*}*/

        /*!* 滚动条滑块 *!*/

        /*&::-webkit-scrollbar-thumb {*/
        /*  background: rgba(204, 204, 204, 1);*/
        /*  cursor: pointer;*/
        /*  border-radius: 3px;*/
        /*}*/

        .el-table {
          tbody {
            tr {
              td {
                padding: 0;

                .cell {
                  padding: 0;

                  p.item {
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;
                    padding: 0 10px;
                    min-height: 40px;

                    span {
                      display: inline-block;
                      width: 100%;
                      line-height: 23px;
                    }
                  }

                  .rowBox {
                    line-height: 40px;
                    border-bottom: none;

                    p {
                      box-sizing: border-box;

                      &.nobdtop {
                        border-top: none;
                      }
                    }
                  }

                  .bl {
                    border-left: 1px solid #292B35;
                  }

                  .br {
                    border-right: 1px solid #292B35;
                  }

                  .bt {
                    border-top: 1px solid #292B35;
                  }

                  .bb {
                    border-bottom: 1px solid #292B35;
                  }

                  .rowSpan2 {
                    box-sizing: border-box;
                    position: relative;

                    .look {
                      line-height: 22px;
                      height: 22px;
                      position: absolute;
                      bottom: 10px;
                      right: 10px;
                      cursor: pointer;
                      color: rgba(6, 137, 250, .7);
                      text-decoration: underline;
                    }
                  }

                  .rankBox {
                    .medal {
                      display: inline-block;
                      width: 26px;
                      height: 32px;
                    }

                    .first {
                      background: url("/static/img/teacher/rank1.png") no-repeat
                    }

                    .second {
                      background: url("/static/img/teacher/rank2.png") no-repeat
                    }

                    .thirdly {
                      background: url("/static/img/teacher/rank3.png") no-repeat
                    }

                    .rank {
                      font-size: 14px;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: rgba(248, 78, 90, 1);
                      margin: 5px 0 ;
                    }

                    .rankScore {
                      font-size: 24px;
                      font-family: PingFangSC-Medium, PingFang SC;
                      font-weight: 500;
                      color: rgba(255, 255, 255, 1);
                      margin-top: 5px;
                    }
                  }
                }
              }

            }
          }
        }

        .loadingBox {
          text-align: center;
          margin-top: 15px;

          .el-button {
            background-color: #212334;
            border-color: #212334;
            color: #606266;

            &:before {
              background-color: unset;
            }
          }

          p {
            font-size: 12px;
            color: #606266;
          }
        }
      }
    }
  }
</style>
